<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="/js/vue.js"></script>
    <script src="/js/axios.js"></script>
    <!-- 引入样式 -->
    <link rel="stylesheet" href="https://unpkg.zhimg.com/element-ui/lib/theme-chalk/index.css">
    <!-- 引入组件库 -->
    <script src="https://unpkg.zhimg.com/element-ui/lib/index.js"></script>
    <script src="/js/auth.js"></script>
    <script src="/js/jquery.min.js"></script>
</head>
<body>
<div id="app">
    <el-row>
        <el-col :lg="18">
            <el-steps :space="400" :active="active" finish-status="success">
                <el-step title="步骤 1"></el-step>
                <el-step title="步骤 2"></el-step>
                <el-step title="步骤 3"></el-step>
            </el-steps>
        </el-col>
    </el-row>
    <el-row>
        <div v-if="active===0">
            <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" >
                <el-form-item label="考试名称" prop="name">
                    <el-input v-model="ruleForm.name" placeholder="请输入考试名称" style="width: 500px"></el-input>
                </el-form-item>
                <el-form-item label="考试分类" prop="type">
                        <el-cascader
                                v-model="ruleForm.type"
                                :options="typeOptions"
                                placeholder="请选择"
                                :props="{ value: 'id', label: 'label'}"
                                @change="handleChange"
                                placeholder="请选择考试分类">
                        </el-cascader>
                </el-form-item>
                <el-form-item label="考试时间" prop="date" required>
                    <el-col :span="4">
                        <el-date-picker
                                v-model="ruleForm.date"
                                type="datetimerange"
                                format="yyyy-MM-dd HH:mm:ss"
                                value-format="yyyy-MM-dd HH:mm:ss"
                                :picker-options="pickerOptions"
                                range-separator="至"
                                start-placeholder="开始日期"
                                end-placeholder="结束日期"
                                align="right">
                        </el-date-picker>
                    </el-col>
                </el-form-item>
                <el-form-item label="考试类型" prop="isResit">
                    <el-radio-group v-model="ruleForm.isResit">
                        <el-radio label=0>统一考试</el-radio>
                        <el-radio label=1>自由考试（补考）</el-radio>
                    </el-radio-group>
                </el-form-item>
                <el-form-item label="关联试卷" prop="paper">
                    <el-select v-model="ruleForm.paperId" placeholder="请选择关联试卷">
                        <el-option
                                v-for="item in paperOptions"
                                :key="item.id"
                                :label="item.name"
                                :value="item.id">
                        </el-option>
                    </el-select>
                </el-form-item>
                 <el-form-item label="总分" prop="totalScore">
                    <el-input type="input" :disabled="true" v-model="ruleForm.totalScore" style="width: 100px"></el-input>
                </el-form-item>
            </el-form>
        </div>
        <div v-if="active===1">
        待开发
        </div>
        <div v-if="active===2">
        点击提交，即可添加考试
        </div>
        <div v-if="active===3">
            <svg t="1596550365788" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1389" width="200" height="200">
                <path d="M13.524271 512.036685a498.504637 498.504637 0 1 1 498.437016 498.437015A498.437016 498.437016 0 0 1 13.524271 512.036685z" fill="#FFF100" p-id="1390"></path><path d="M40.572814 593.182312a556.253275 556.253275 0 0 1 636.114096-550.099732A498.437016 498.437016 0 0 0 56.260968 723.623908 555.441819 555.441819 0 0 1 40.572814 593.182312z" fill="#FFFFFF" p-id="1391"></path>
                <path d="M978.88675 430.891057a555.847547 555.847547 0 0 1-555.847546 555.847547 568.763226 568.763226 0 0 1-80.131307-5.680194 498.572258 498.572258 0 0 0 620.425942-680.541327 556.253275 556.253275 0 0 1 15.552911 130.373974z" fill="#F8B62D" p-id="1392"></path>
                <path d="M511.961287 1023.997971a511.961287 511.961287 0 1 1 459.28425-738.425208A13.524271 13.524271 0 0 1 946.698985 297.609365a484.912744 484.912744 0 1 0 36.718396 327.354984 13.524271 13.524271 0 1 1 26.304708 6.288786 510.000267 510.000267 0 0 1-497.760802 392.744836z" fill="#231815" p-id="1393"></path><path d="M1010.398302 525.560956a13.524271 13.524271 0 0 1-13.524271-13.524271A486.400414 486.400414 0 0 0 989.300439 426.089941a13.524271 13.524271 0 0 1 26.642815-4.733495 514.328034 514.328034 0 0 1 7.97932 90.680239 13.524271 13.524271 0 0 1-13.524272 13.524271z" fill="#231815" p-id="1394"></path><path d="M284.618288 631.591242L204.081253 551.054207a23.93796 23.93796 0 0 1 0-33.810678l35.230726-35.230727a23.870339 23.870339 0 0 1 33.810678 0l140.584799 140.517178a23.93796 23.93796 0 0 0 33.810678 0l323.973917-323.973917a24.005581 24.005581 0 0 1 33.810678 0l41.789998 41.85762a23.802717 23.802717 0 0 1 0 33.810678l-392.9477 393.082943a24.005581 24.005581 0 0 1-33.810678 0l-79.387472-79.387472" fill="#FFFFFF" p-id="1395"></path><path d="M437.239688 787.796575a37.191746 37.191746 0 0 1-26.507571-10.95466L331.344645 697.522064a13.524271 13.524271 0 1 1 19.136843-19.136843L429.868961 757.434586a10.616553 10.616553 0 0 0 14.673834 0l393.082943-393.015322a10.48131 10.48131 0 0 0 3.042961-7.370728 10.413689 10.413689 0 0 0-3.042961-7.370727l-41.85762-41.85762a10.616553 10.616553 0 0 0-14.673834 0L457.120367 632.064592a37.326989 37.326989 0 0 1-52.947522 0L263.723289 491.547414a10.346067 10.346067 0 0 0-14.673835 0l-35.365969 35.230726a10.48131 10.48131 0 0 0 0 14.741456L294.152899 622.191874a13.524271 13.524271 0 0 1-19.136844 19.069222L194.546641 560.65644a37.529853 37.529853 0 0 1 0-53.015144L229.912611 472.41057a37.462231 37.462231 0 0 1 52.947521 0l140.381936 140.517178a10.616553 10.616553 0 0 0 14.741455 0l323.973917-323.973917a37.462231 37.462231 0 0 1 52.947522 0l41.857619 41.857619a37.462231 37.462231 0 0 1 0 52.947522l-393.082942 393.082943a36.92126 36.92126 0 0 1-26.439951 10.95466z" fill="#231815" p-id="1396"></path>
            </svg>
        </div>
    </el-row>
    <el-row>
        <el-col :span="12" :offset="5">
            <div>
                <el-button style="margin-top: 12px;" @click="prev">上一步</el-button>
                <el-button style="margin-top: 12px;" @click="next" id="nextbtn">下一步</el-button>
                <el-button type="primary" icon="el-icon-check" style="display: none" @click="onSubmit" id="submitbtn">提交</el-button>
            </div>
        </el-col>
    </el-row>

</div>
<script>
    let p={headers};
    new Vue({
        el:"#app",
        data:{
            ruleForm: {
                name: '',
                type: '',
                date: '',
                isResit:'',
                paperId:'',
                status:1,
                totalScore: 100
            },
            typeOptions:[],
            paperOptions:[],
            pickerOptions: {
                shortcuts: [{
                    text: '最近一周',
                    onClick(picker) {
                        const end = new Date();
                        const start = new Date();
                        start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
                        picker.$emit('pick', [start, end]);
                    }
                }, {
                    text: '最近一个月',
                    onClick(picker) {
                        const end = new Date();
                        const start = new Date();
                        start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
                        picker.$emit('pick', [start, end]);
                    }
                }, {
                    text: '最近三个月',
                    onClick(picker) {
                        const end = new Date();
                        const start = new Date();
                        start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
                        picker.$emit('pick', [start, end]);
                    }
                }]
            },
            rules: {
                name: [
                    { required: true, message: '请输入活动名称', trigger: 'blur' },
                ],
                type: [
                    { required: true, message: '请选择考试分类', trigger: 'change' }
                ],
                isResit: [
                    { required: true, message: '请选择考试类型', trigger: 'change' }
                ],
                paper: [
                    { required: true, message: '请选择考试分类', trigger: 'change' }
                ]
            },
            active:0
        },
        mounted(){
            axios.get("/exam/examtype/menu",p).then(res=>{
                let data = deleteChildren(res.data);
                this.typeOptions=data;
            })
            axios.get("/exam/paper/all",p).then(res=>{
                this.paperOptions=res.data.data;
            })
        },
        methods:{
            prev(){
                if(--this.active<0) this.active=0;
                $("#nextbtn").css("display","inline");
                $("#submitbtn").css("display","none");
            },
            next(){
                if(++this.active>3) this.active=3;
                if(this.active===2){
                    $("#nextbtn").css("display","none");
                    $("#submitbtn").css("display","inline");
                }
            },
            handleChange(value) {
                this.ruleForm.type = value[value.length - 1];
            },
            onSubmit() {
                // console.log(this.$refs[formName]);
                // this.$refs[formName].validate((valid) => {
                //     if (valid) {
                //         alert('submit!');
                //     } else {
                //         console.log('error submit!!');
                //         return false;
                //     }
                // });

                for (let ruleFormKey in this.ruleForm) {
                    if(this.ruleForm[ruleFormKey]===""||this.ruleForm[ruleFormKey]===null||this.ruleForm[ruleFormKey]===undefined){
                        this.$alert('请完整输入内容', '提示', {
                            confirmButtonText: '确定',
                            type: 'warning',
                            callback: action => {
                                this.$message({
                                    showClose: true,
                                    message: '请完整输入内容',
                                    type: 'warning'
                                });
                            }
                        });
                        return
                    }
                }
                let exam = JSON.parse(JSON.stringify(this.ruleForm))
                axios.post("/exam/exam/add",exam,p).then(res=>{
                    console.log(res)
                    if(res.data.code===200){
                        this.$message({
                            showClose: true,
                            message: '添加成功',
                            type: 'success'
                        });
                        this.ruleForm={}
                    }else {
                        this.$message({
                            showClose: true,
                            message: '错了哦，这是一条错误消息',
                            type: 'error'
                        });
                    }

                })
            }
        }
    })


    function deleteChildren(obj) {
        for (let i in obj) {
            if(obj[i].children){
                if(obj[i].children.length){
                    deleteChildren(obj[i].children)
                }else {
                    delete obj[i].children;
                }
            }
        }
        return obj;
    }
</script>
</body>
</html>